@use '../../variables';
@use '../../../../styles/mixins';

$block: '.#{variables.$ns}tabs-legacy';

#{$block} {
    --_--vertical-item-padding: var(--g-tabs-vertical-item-padding, 6px 20px);
    --_--vertical-item-height: var(--g-tabs-vertical-item-height, 18px);

    &_size {
        &_m {
            --_--item-height: 36px;
            --_--item-gap: 24px;
            --_--item-border-width: 2px;

            #{$block}__item-title,
            #{$block}__item-counter {
                @include mixins.text-body-1();
            }
        }

        &_l {
            --_--item-height: 40px;
            --_--item-gap: 28px;
            --_--item-border-width: 2px;

            #{$block}__item-title,
            #{$block}__item-counter {
                @include mixins.text-body-2();
            }
        }

        &_xl {
            --_--item-height: 44px;
            --_--item-gap: 32px;
            --_--item-border-width: 3px;

            #{$block}__item-title,
            #{$block}__item-counter {
                @include mixins.text-subheader-3();
            }
        }
    }

    &__item {
        cursor: pointer;
        user-select: none;
        outline: none;

        &-content {
            display: flex;
            align-items: center;
            border-radius: var(--g-focus-border-radius);

            #{$block}__item_overflow & {
                min-width: 0;
            }
        }

        &-icon {
            margin-inline-end: 8px;
        }

        &-title {
            white-space: nowrap;

            #{$block}__item_overflow & {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        &-counter,
        &-label {
            margin-inline-start: 8px;
        }

        &-icon > svg {
            display: block;
        }
    }

    &_direction_horizontal {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        box-shadow: inset 0 calc(var(--g-tabs-border-width, 1px) * -1) 0 0
            var(--g-color-line-generic);
        overflow: hidden;

        #{$block}__item {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            height: var(--g-tabs-item-height, var(--_--item-height));
            border-block-end: var(--g-tabs-item-border-width, var(--_--item-border-width)) solid
                transparent;
            padding-block-start: var(--_--item-border-width);

            &:focus-visible {
                #{$block}__item-content {
                    @include mixins.focus-outline();
                    outline-offset: -2px;
                }
            }

            &-meta {
                display: none;
            }

            &-title {
                color: var(--g-color-text-secondary);
            }

            &-icon,
            &-counter {
                color: var(--g-color-text-hint);
            }

            &_active,
            &:hover,
            &:focus-visible {
                #{$block}__item-title {
                    color: var(--g-color-text-primary);
                }

                #{$block}__item-icon,
                #{$block}__item-counter {
                    color: var(--g-color-text-secondary);
                }
            }

            &_active,
            &_active:hover,
            &_active:focus-visible {
                border-color: var(--g-color-line-brand);
            }

            &_disabled {
                pointer-events: none;

                #{$block}__item-title {
                    color: var(--g-color-text-hint);
                }
            }
        }

        > :not(:last-child) {
            margin-inline-end: var(--g-tabs-item-gap, var(--_--item-gap));
        }
    }

    &_direction_vertical {
        display: flex;
        flex-direction: column;

        #{$block}__item {
            padding: var(--_--vertical-item-padding);

            &-title {
                line-height: var(--_--vertical-item-height);
                color: var(--g-color-text-primary);
            }

            &-meta {
                line-height: var(--_--vertical-item-height);
                color: var(--g-color-text-secondary);
            }

            &-icon,
            &-counter {
                color: var(--g-color-text-secondary);
            }

            &:hover,
            &:focus-visible {
                background-color: var(--g-color-base-generic-hover);
            }

            &_active {
                background-color: var(--g-color-base-selection);
            }

            &_active:hover,
            &_active:focus-visible {
                background-color: var(--g-color-base-selection-hover);
            }

            &_disabled {
                pointer-events: none;

                & #{$block}__item-title {
                    color: var(--g-color-text-secondary);
                }
            }
        }
    }
}
